
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>文字2</title>
</head>
<body >
<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa">
    您的浏览器不支持canvas
</canvas>
<script>
    window.onload=function(){
        var canvas=document.getElementById("canvas");
        canvas.width=800;
        canvas.height=800;
        var context=canvas.getContext("2d");

        context.beginPath();
        context.fillStyle="black";
        context.fillRect(0,0,canvas.width,canvas.height);
        context.beginPath();
        context.arc(400,400,150,0,Math.PI*2);
        context.fillStyle="#fff";
        context.fill();
        context.clip();

        context.font="bold 150px Arial";
        context.textAlign="center";
        context.textBaseline="middle";
        context.fillStyle="#058";
        context.fillText("CANVAS",canvas.width/2,canvas.height/2)


    }
</script>
</body>
</html>